<html>
    <head>
        <style type="text/css">
            body {
                font-size: 100%;
                padding: 0.5em;
            }

            #map {
                height: 340px;
                border: 1px solid black;
            }

            #variables {
            }

            #plot {
                height: 200px;
                width: 100%;
            }
        </style>

        <!--[if IE]><script language="javascript" type="text/javascript" src="js/excanvas.pack.js"></script><![endif]-->
        <script type="text/javascript" src="js/jquery-1.2.1.pack.js"></script>
        <script type="text/javascript" src="js/jquery.flot.pack.js"></script>
        <script type="text/javascript" src="js/OpenLayers/lib/OpenLayers.js"></script>
        <script type="text/javascript" src="js/jsdap.js"></script>
        <script type="text/javascript" src="js/demo2.js"></script>
    </head>
    <body onload="onLoad();">
        <div id="description">
            <p>This demo downloads the position of the <a href="http://www.pmel.noaa.gov/tao/">TAO buoys</a> from a <a href="http://dapper.pmel.noaa.gov/dapper/epic/">Dapper server</a> using a <code>DODS</code> request, plotting them on an <a href="http://openlayers.org/">OpenLayers</a> map. Each buoy can then be selected for data download. The contained variables (wind direction, temperature quality, etc.) are also downloaded from the server using <code>DDS/DAS</code> requests. The data is then plotted using <a href="http://code.google.com/p/flot/">flot</a>.</p>
        </div>
        <div id="map"></div>
        <div id="variables"></div>
        <div id="plot"></div>
    </body>
</html>
